// settings.ts - 设置状态管理模块
// 这个文件使用Zustand管理应用的设置状态，如主题、语言、侧边栏状态等

// 导入Zustand的create函数：用于创建状态存储
import { create } from 'zustand';
// 导入persist中间件：用于将状态持久化到localStorage，页面刷新后状态不会丢失
import { persist } from 'zustand/middleware';

// 定义设置状态的接口（TypeScript类型定义）
// 接口描述了状态的结构和类型，确保类型安全
interface SettingsState {
  // 基本设置
  theme: 'light' | 'dark' | 'auto'; // 主题设置：亮色、暗色或自动跟随系统
  language: string; // 语言设置：存储语言代码，如'zh-CN'、'en'等
  sidebarCollapsed: boolean; // 侧边栏是否折叠：true表示折叠，false表示展开
  
  // 更新设置的方法（这些是函数类型定义）
  setTheme: (theme: 'light' | 'dark' | 'auto') => void; // 设置主题的方法
  setLanguage: (language: string) => void; // 设置语言的方法
  toggleSidebar: () => void; // 切换侧边栏折叠状态的方法
}

// 创建并导出设置状态存储
// useSettingsStore是一个自定义Hook，可以在React组件中使用
// create<SettingsState>() 创建了一个类型安全的Zustand store
// persist 中间件将状态持久化到localStorage
export const useSettingsStore = create<SettingsState>()(
  persist(
    // set函数用于更新状态，类似于React的setState
    (set) => ({
      // 默认值：应用的初始状态
      theme: 'light', // 默认主题为亮色
      language: 'zh-CN', // 默认语言为中文
      sidebarCollapsed: false, // 默认侧边栏不折叠
      
      // 更新方法：定义如何修改状态
      setTheme: (theme) => set({ theme }), // 设置主题：直接更新theme状态
      setLanguage: (language) => set({ language }), // 设置语言：直接更新language状态
      toggleSidebar: () => set((state) => ({ sidebarCollapsed: !state.sidebarCollapsed })), // 切换侧边栏状态：取反当前值
    }),
    {
      name: 'settings-storage', // 本地存储的键名：在localStorage中存储的key
    }
  )
);